<template>
  <view>
    <view
        class="flex align-center justify-center relative h-144 sticky z-3"
        id="container"
        :style="{top:`${top}px`}"
    >
      <!--骨架屏-->
      <view v-if="loading">
        <view class="flex align-center justify-center pb-30 pt-50">
          <view class="h-60 w-200 br-5 bg-f4f7f4"> </view>
          <view class="w-30 h-5 br-5 m-lr-10"></view>
          <view class="h-60 w-200 br-5 bg-f4f7f4"></view>
          <view class="h-60 w-180 br-5 bg-f4f7f4 ml-20"></view>
        </view>
      </view>

      <date-picker
          v-if="!loading"
          class="datePicker z-999"
          @changeTime="changeTime"
      >
      </date-picker>
      <u-dropdown
          v-if="!loading"
          ref="uDropdown"
          height="144"
          inactive-color="#2D8CF0"
          :close-on-click-mask="false"
          menu-icon="arrow-down-fill"
      >
        <u-dropdown-item :title="title">
          <view class="bg-fff pb-30">
            <u-checkbox-group class="w-full" size="40">
              <view class="w-full flex flex-column p-lr-20">
                <view
                    v-for="(item, index) in checkedStatusList"
                    :key="index"
                    class="h-100 border-333333 br-10 pl-25 w-full flex align-center mb-30">
                  <u-checkbox
                      class="w-full flex"
                      :name="item.name"
                      v-model="item.checked"
                      :disabled="false"
                      shape="circle"
                      active-color="#19BE6B">
                    <text class="color-333333 fz-32 ml-30" > {{ item.name }} </text>
                  </u-checkbox>
                </view>
              </view>
            </u-checkbox-group>
            <view
                v-if="checkedNumber"
                class="m-lr-20 h-100 br-10 bg-2D8CF0 text-center fz-32 lh-100 color-fff"
                @tap="confirm"
            >
              <text>确定</text>
            </view>
            <view
                v-else
                class="m-lr-20 h-100 br-10 bg-BEBEBE text-center fz-32 lh-100 color-fff"
            >
              <text>确定</text>
            </view>
          </view>
        </u-dropdown-item>
      </u-dropdown>
    </view>
    <!--骨架屏-->
    <list-skeleton v-if="loading"></list-skeleton>
    <view v-else-if="workList.length && !loading">
      <view
          class="m-lr-20 mb-30 pl-20 h-300 flex align-center justify-between bg-E9F8FF br-10"
          v-for="item in workList"
          :key="item.workOrderId"
          @tap="clickItem(item)"
      >
        <view class="flex flex-column oh">
          <text class="fz-40 font-bold lh-56 mt-12 text-ellipsis">{{ item.workOrderName || '-'}}</text>
          <text class="fz-32 lh-45 mt-20 text-ellipsis">所属科室: {{item.departmentName || '-'}}</text>
          <text class="fz-32 lh-45 mt-20 text-ellipsis">巡检人: {{item.inspectionUser || '-'}}</text>
          <view class="flex mt-10">
            <text class="fz-32 lh-40">
              起止时间：
            </text>
            <view class="flex flex-column fz-32 lh-40">
              <text>{{ timeFormat(item.startDate, item.workOrderStartTime)}}</text>
              <text>{{ timeFormat(item.endDate, item.workOrderEndTime)}}</text>
            </view>
          </view>
        </view>
        <view class="relative mr-60">
          <CustomCircleProgress
              :border-width="8"
              :size="128"
              :percent="100"
              :active-color="textColor(item.status)"
          >
            <view class="h-full w-full lh-center">
              <text
                  :style="{'color':textColor(item.status)}"
                  class="fz-30">
                {{showContent(item.status)}}
              </text>
            </view>
          </CustomCircleProgress>
        </view>
      </view>
    </view>

    <empty-icon v-else></empty-icon>
  </view>
</template>

<script>
import CustomCircleProgress from '../../components/CustomCircleProgress'
import getNavBarHeight from "@/mixins/getNavBarHeight";
import DatePicker from "@/components/DatePicker/DatePicker";
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import dayjs from '@/libs/dayjs.min.js'
import {finishList, myFinishList} from "@/api/inspection/task";
import ListSkeleton from "../../components/ListSkeleton";
import { INSPECTION_ORDER_STATUS } from '@/utils/dict'

export default {
  name: "workDone",
  components: {ListSkeleton, EmptyIcon, DatePicker, CustomCircleProgress},
  mixins:[getNavBarHeight],
  data() {
    return {
      hasNext: false,
      pageNum: 1,
      pageSize: 10,
      workList: [],
      startTime: '',
      endTime: '',
      title: '全部类型',
      checkedStatusList:[{
        name:'已完成',
        checked: true,
        status:4
      },{
        name:'已签名',
        checked: true,
        status:5
      }],
      checkedNumber: 2,
      taskList: '',
      selfTaskList: '',
      loading: true,
    }
  },
  created(){
    this.taskList = this.$auth.hasPermiOr(['inspection:task:list', 'inspection:workOrder:list'])
    this.selfTaskList = this.$auth.hasPermiOr(['inspection:task:assignSelf', 'inspection:workOrder:assignSelf'])
    this.doQuery().then(res => {
      this.hasNext = res.hasNext
      this.workList = res.rows
    }).finally(() => {
      this.loading = false
    })
  },
  watch:{
    checkedStatusList:{
      handler(newValue){
        let checkedArray = newValue.filter(item => {
          return item.checked
        })
        this.checkedNumber = checkedArray.length
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    orderStatus(){
      return [INSPECTION_ORDER_STATUS.FINISHED,INSPECTION_ORDER_STATUS.SIGNED,INSPECTION_ORDER_STATUS.TIMEOUT]
    },
  },
  methods:{
    showContent(status){
      if(status === this.orderStatus[0].value){
        return this.orderStatus[0].label
      }
      if(status === this.orderStatus[1].value){
        return this.orderStatus[1].label
      }
      if(status === this.orderStatus[2].value){
        return '有漏检'
      }
      return '-'
    },
    textColor(status){
      if(status===this.orderStatus[1].value){
        return '#2d8df2'
      }
      if(status===this.orderStatus[2].value){
        return '#FF6262'
      }
      return '#19BE6B'
    },
    show(){
      this.pageNum = 1
      this.doQuery().then(res => {
        this.hasNext = res.hasNext
        this.workList = res.rows
      }).finally(() => {
        this.loading = false
      })
    },
    hide(){
      this.loading = true
    },
    confirm() {
      if(this.checkedNumber === this.checkedStatusList.length){
        this.title = '全部类型'
      }else{
        this.title = this.checkedStatusList.filter(item => {
          return item.checked
        }).map(item => {
          return item.name
        }).join()
      }
      this.doQuery().then(res => {
        this.hasNext = res.hasNext
        this.workList= res.rows
      })
      this.$refs.uDropdown.close();
    },
    clickItem(item) {
      this.$tab.navigateTo('/pages/work/work-order-detail?workOrderId='+item.workOrderId)
    },
    reachBottom(){
      if(this.hasNext){
        this.pageNum ++
        this.doQuery().then(res => {
          this.hasNext = res.hasNext
          this.workList= [...this.workList,...res.rows]
        })
      }
    },
    changeTime(e){
      this.pageNum = 1
      this.startTime = e.startTime ? dayjs(e.startTime).format('YYYY-MM-DD') : '';
      this.endTime = e.endTime ? dayjs(e.endTime).format('YYYY-MM-DD') : '';
      this.doQuery().then(res => {
        this.hasNext = res.hasNext
        this.workList= res.rows
      })
    },
    doQuery(){
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        inspectionStartDate : this.startTime,
        inspectionEndDate : this.endTime
      }
      if(this.checkedNumber === 1){
        const status = this.checkedStatusList.find(item => {
          return item.checked
        })?.status
        params.status = status
      }else{
        const statusList = this.checkedStatusList.reduce((pre, next) => {
          if(next.checked){
            pre.push(next.status)
          }
          return pre
        },[]).join()
        params.statusList = statusList
      }
      if(this.taskList){
        return finishList(params).then(res => {
          return Promise.resolve(res)
        }).catch(() => {
          this.loading = false
        })
      }
      else{
        return myFinishList(params).then(res => {
          return Promise.resolve(res)
        }).catch(() => {
          this.loading = false
        })
      }
    },
    timeFormat(date, time){
      if(!date || !time){
        return '-'
      }
      return date + ' ' + time.split(':')[0] + ":" + time.split(':')[1]
    }
  }
}
</script>

<style lang="scss" scoped>
.datePicker{
  position: absolute;
  left: 40rpx
}
</style>
